<template>
  <el-dialog
    :title="`${isUpdateForm ? '修改' : '添加'}品牌`"
    :visible.sync="visible"
    width="500px"
  >
    <!-- 
      默认插槽：内容区展示
      具名插槽：footer 底部展示

      :model="brandFormData" 表单数据
      :rules="brandFormRules" 表单规则
      ref="formRef" 获取组件实例对象，将来调用实例对象上的方法 
        validate（用来校验整个表单）
        clearValidate（清空表单校验结果的）
     -->
    <el-form
      label-width="80px"
      :model="brandFormData"
      :rules="brandFormRules"
      ref="formRef"
    >
      <el-form-item label="品牌名称" prop="name">
        <el-input
          placeholder="请输入品牌名称"
          v-model="brandFormData.name"
        ></el-input>
      </el-form-item>
      <el-form-item label="品牌图片" prop="picUrl">
        <!-- 
          action 上传服务器地址
            /admin-api/infra/file/upload -> http://localhost:8091/admin-api/infra/file/upload -> 404
            http://139.198.152.148:48080/admin-api/infra/file/upload 
              开发环境OK，但是将来切换环境，需要手动修改服务器地址，太麻烦了
            process.env.VUE_APP_BASE_API + /admin-api/infra/file/upload 
              走代理服务器

          :show-file-list="false" 是否能上传多张图片
          :on-success="handleAvatarSuccess" 上传图片成功触发函数 -> 得到图片数据，使用
          :before-upload="beforeAvatarUpload" 上传图片之前触发函数 -> 对图片大小和类型进行校验
          :headers="headers" 携带请求头参数
          accept="image/png,image/jpg,image/jpeg" 允许接受文件类型
         -->
        <el-upload
          class="avatar-uploader"
          :action="uploadUrl"
          :show-file-list="false"
          :on-success="handleAvatarSuccess"
          :before-upload="beforeAvatarUpload"
          :headers="headers"
          accept="image/png,image/jpg,image/jpeg"
        >
          <img
            v-if="brandFormData.picUrl"
            :src="brandFormData.picUrl"
            class="avatar"
          />
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          <div slot="tip" class="el-upload__tip">
            请上传大小不超过 <span class="red-tip">5MB</span> 格式为
            <span class="red-tip">png/jpg/jpeg</span> 的文件
          </div>
        </el-upload>
      </el-form-item>
      <el-form-item label="品牌排序" prop="sort">
        <el-input
          placeholder="请输入品牌排序"
          v-model="brandFormData.sort"
        ></el-input>
      </el-form-item>
      <el-form-item label="品牌描述">
        <el-input
          placeholder="请输入品牌描述"
          type="textarea"
          v-model="brandFormData.description"
        ></el-input>
      </el-form-item>
      <el-form-item label="状态" prop="status">
        <el-radio :label="0" v-model="brandFormData.status">开启</el-radio>
        <el-radio :label="1" v-model="brandFormData.status">关闭</el-radio>
      </el-form-item>
    </el-form>

    <template #footer>
      <span class="dialog-footer">
        <el-button type="primary" @click="submit">确 定</el-button>
        <el-button @click="close">取 消</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import { getAccessToken } from "@/utils/auth";
import { addProductBrand, updateProductBrand } from "@/api/mall/product/brand";

export default {
  name: "UpdateBrandForm",
  data() {
    return {
      // 看数据是否与后端需要交互（发送请求是否需要使用此数据）
      // 如果需要，数据就要按照接口文档要求定义，如果不需要，就随意（按照功能定义名称）
      visible: false,
      // 表单数据
      brandFormData: {
        name: "",
        picUrl: "",
        sort: 0,
        description: "",
        status: 0,
      },
      // 表单校验规则
      brandFormRules: {
        name: [
          { required: true, message: "品牌名称不能为空", trigger: "blur" },
        ],
        picUrl: [
          { required: true, message: "图片名称不能为空", trigger: "change" },
        ],
        sort: [
          { required: true, message: "品牌排序不能为空", trigger: "blur" },
        ],
        // description: [],
        status: [
          { required: true, message: "品牌状态不能为空", trigger: "change" },
        ],
      },
      // 上传图片服务器地址
      uploadUrl: process.env.VUE_APP_BASE_API + "/admin-api/infra/file/upload",
      // 上传图片请求头参数
      headers: {
        Authorization: "Bearer " + getAccessToken(),
      },
    };
  },
  methods: {
    open() {
      this.visible = true;
      // 清空数据操作
      this.brandFormData = {
        name: "",
        picUrl: "",
        sort: 0,
        description: "",
        status: 0,
      };
      // 清空表单校验结果
      // 可选链: 判断问号前面内容是否有值，没有值就不会往后执行，有值才会
      this.$refs.formRef?.clearValidate();
    },
    close() {
      this.visible = false;
    },
    // 上传图片成功
    handleAvatarSuccess(res, file) {
      if (res.code === 0) {
        this.brandFormData.picUrl = res.data;
        // 手动清空表单校验结果
        this.$refs.formRef.clearValidate(["picUrl"]);
      } else {
        // 错误提示
        this.$message.error(res.msg);
      }
    },
    // 上传图片之前
    beforeAvatarUpload(file) {
      // file 就是你上传的文件
      // file.type 上传的文件类型
      // file.size 上传的文件大小
      const validImageType = ["image/jpeg", "image/jpg", "image/png"];
      const isValidType = validImageType.includes(file.type);

      const validImageSize = 5 * 1024 * 1024;
      const isLt5M = file.size < validImageSize;

      if (!isValidType) {
        this.$message.error("上传头像图片只能是 png/jpg/jpeg 格式!");
      }
      if (!isLt5M) {
        this.$message.error("上传头像图片大小不能超过 5MB!");
      }

      // 返回值是true，就会继续上传
      // 返回值是false，就会终止上传
      return isValidType && isLt5M;
    },
    // 确定
    submit() {
      // 校验整个表单
      this.$refs.formRef.validate(async (valid) => {
        if (valid) {
          // 发送请求
          if (this.isUpdateForm) {
            // 修改
            // 除了 get 请求返回值有价值，其他请求方式返回值一般没用
            await updateProductBrand(this.brandFormData);
          } else {
            // 新增
            // 除了 get 请求返回值有价值，其他请求方式返回值一般没用
            await addProductBrand(this.brandFormData);
          }

          // 提示
          this.$message.success(
            `${this.isUpdateForm ? "修改" : "添加"}品牌成功`,
          );
          // 隐藏对话框
          this.close();
          // 触发自定义事件，执行 getList 回调
          this.$emit("success");
        }
      });
    },
  },
  computed: {
    isUpdateForm() {
      return !!this.brandFormData.id;
    },
  },
};
</script>

<style scoped>
/* 
  scoped 样式只对当前组件生效

  深度样式选择器（深度选择器）：专门用来修改子组件样式
    找到哪些样式属于子组件（看类名是否在当前组件出现过，出现过就是当前组件的样式，没有出现过才是子组件的样式）
*/
.avatar-uploader >>> .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader >>> .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 150px;
  height: 150px;
  line-height: 150px;
  text-align: center;
}
.avatar {
  width: 150px;
  height: 150px;
  display: block;
}

.red-tip {
  color: red;
  font-weight: 500;
}
</style>
